<template>
    <div id="getOrder">
        <mt-header fixed :title="$route.params.orderState === 0 ? '收到的订单' : '已完成订单'">
            <span slot="left">
                <mt-button icon="back" @click.native="goB">返回</mt-button>
            </span>
        </mt-header>
        <!-- 订单区域 -->
        <div class="order-content">
            <div class="list">
                 <mt-cell
                    :title="item.orderUName"
                    is-link
                    v-for="(item, index) in orderMenu"
                    :key="index"
                    @click.native="toOrderInfo(index)"
                >
                    <mt-badge type="error" size="small" v-if="item.orderFlow === 0">{{item.shopOrder.orderList.length}}</mt-badge>
                    <span v-else-if="item.orderFlow === 1" >您已经发货</span>
                    <span v-else-if="item.orderFlow === 2" style="color:red;">用户已经付款</span>
                    <span v-else-if="item.orderFlow === 3" >已收款</span>
                    <span v-else-if="item.orderFlow === -1">用户申请退款</span>
                    <span  v-else>已同意退款</span>
                </mt-cell>
            </div>
        </div>
        <!-- 购物车为 0显示的信息 空空如也 -->
        <div class="emplty" v-if="isEmplty">
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-meiyoushuju"></use>
                </svg>
            </div>
            <div class="text">
                没有订单
            </div>
        </div>
        <!-- 订单详情 -->
        <transition name="lIn">
            <div class="order-info"  @click.self="() =>{isOrder = false}" v-if="isOrder">          
                <div class="info-list">
                    <div class="mon-time">
                        <p v-if="orderData.orderFlow=== ''" class="orderTitle">
                            <span>退款理由：</span>
                            {{ orderData.orderRefundCommit}}
                        </p>
                        <p>金额：￥{{shopOrder.total}}</p>
                        <p>姓名：{{shopOrder.personInfo.orderName}}</p>
                        <p>地址：{{shopOrder.personInfo.orderAddre}}</p>
                        <p>电话：{{shopOrder.personInfo.orderTel}}</p>
                        <p>备注：{{shopOrder.personInfo.orderCom}}</p>
                        <p>时间：{{shopOrder.time}}</p>
                        <p>下单用户名：{{orderData.orderUName}}</p>

                    </div>
                    <div class="list">
                        <ul>
                            <li v-for="(item, index) in shopOrder.orderList" :key="index">
                                <span class="name">{{item.foodName}}</span>
                                <span class="price">￥{{item.foodPrice}}</span>
                                <span class="num">X {{item.foodCount}}</span>
                            </li>
                            <li></li>
                        </ul>
                    </div>
                    <!-- 关闭 -->
                    <div class="order-close">
                            <mt-button :type="btnType" size="large" @click.native="changeOrderStatus"
                            >{{statusText}}</mt-button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
import Bscroll from 'better-scroll'
import {mapState, mapActions, mapMutations} from 'vuex'
import { MessageBox, Indicator} from 'mint-ui'
import axios from 'axios'

export default {
    data(){
        return {
            isOrder:false,//是否查看订单详情
            orderMenu: [],//获取总订单
            orderData:{},//订单详情的数据
            shopOrder: {},//订单信息
            orderIndex: 0,//当前订单索引
            isEmplty: false,
            statusText: '',//根据订单状态显示相应内容
            statusClick: false,//根据状态 按钮是否可点击
            btnType: ''//按钮相应的操作
        }
    },
    inject: ['reload', 'goB'],
    created(){

        //正在获取内容  这里应该提示 如果超过多少秒  应该停止加载 告诉用户
        this.setIndicator('加载中')        
        axios({
            method: 'get',
            url:'http://localhost:3003/getOrder',
            params:{
                orderGet: this.storeFlag+'boss',
                orderState: this.$route.params.orderState
            }
        }).then((res) =>{
            const {data, code} = res.data
            if(code === 1){
                this.orderMenu = data
            }

            if(this.orderMenu.length === 0) this.isEmplty = true
            Indicator.close()
        })
    },

    computed:{
        ...mapState([
            'storeFlag',
            'sname'
        ])
    },
    methods:{
        ...mapMutations([
            'setToast',
            'setIndicator'
        ]),
        ...mapActions([
            'changeOrder'
        ]),
        //前往订单详情
        toOrderInfo(index){
            this.orderData = this.orderMenu[index]
            this.shopOrder = this.orderMenu[index].shopOrder
            const orderFlow = this.orderMenu[index].orderFlow

            if(orderFlow === 0){
                this.statusText = '点击发货'
                this.btnType = 'danger'
            }else if(orderFlow === 1){
                this.statusText = '已发货'
                this.btnType = 'default'
            }else if(orderFlow === 2){
                this.statusText = '点击收款'
                this.btnType = 'danger'
            }else if(orderFlow === 3){
                this.statusText = '订单已经完成'
                this.btnType = 'default'
            }else if(orderFlow === -1){
                this.statusText = '查看退款理由'
                this.btnType = 'danger'          
            }else if(orderFlow === ''){
                this.statusText = '已同意退款'
                this.btnType = 'default'
            }

            //打开面板
            this.isOrder = true           
        },

        //修改订单的状态
        changeOrderStatus(){
            let orderFlow = ''
            if(this.statusText === '点击发货'){
                orderFlow = 1
            }else if(this.statusText === '点击收款'){
                orderFlow = 3
                //此时可以在这里添加账户的余额
            }else if(this.statusText === '查看退款理由'){
                return this.refunOrder()
            }

            this.changeOrder({
                oFlag: this.orderData.oFlag,
                data:{
                    orderFlow
                },
                reload: this.reload
            })
        },

        //查看退款
        refunOrder(){
            MessageBox({
                title: '退款理由',
                message: this.orderData.orderRefundCommit,
                showCancelButton: true,
                confirmButtonText: '同意退款',
                cancelButtonText: '让我想想',
            }).then(action =>{
                if(action === 'cancel') return

                this.setIndicator('正在前往退款')
                this.changeOrder({
                    oFlag: this.orderData.oFlag,
                    data:{
                        orderFlow: ''
                    },
                    reload: this.reload
                })
            })
        }
    }
}
</script>

<style lang="less" scoped>
    #getOrder{
        height: 100%;
        overflow: hidden;
        .order-content{
            height: 100%;
            overflow: hidden;
            margin-top: 40px;
        }

        // 订单详情
        .order-info{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10;
            .info-list{
                width: 90%;
                background: #fff;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate3d(-50%, -50%, 0);
                box-sizing: border-box;
                //金额时间
                .mon-time{
                    margin-bottom: 16px;
                    padding: 0 5px;
                    p{
                        font-size: 18px;
                        margin: 5px;
                    }
                }
                //美食列表
                .list{
                    height: 200px;
                    padding: 0 5px;
                    overflow: hidden;
                    overflow-y: auto;
                    ul{
                        li{
                            display: flex;
                            justify-content: space-between;
                            margin: 10px 0;
                        }
                    }
                }
                //关闭按钮
                .order-close{
                    display: flex;
                    margin-top: 10px;
                    .mint-button{
                        border-radius: 0;
                        height: 40px;
                    }
                }
            }
        }
    }
</style>


